<template>
  <div>
    <h3 class="title_h3 titone">
      <span>达人列表</span>
    </h3>
    <div class="live_details" v-if="hasRoot">
      <!-- <div class="f_mask" v-show="activeFiltr" @click="activeFiltr = false"></div> -->
      <div class="filtr_box">
        <div class="filtr_item">
          <div class="ld_search_date">
            <span
              v-for="item in fDate"
              :class="{ active: item.active }"
              :key="item.text"
              @click="checkedDateFn(item)"
            >{{ item.text }}</span>
          </div>
          <div
            class="filtr_btn"
            :class="{'active':activeFiltr}"
            @click="activeFiltr = !activeFiltr"
          >
            <i></i>
            <span>筛选</span>
          </div>
        </div>
        <van-popup
          v-model="activeFiltr"
          position="right"
          :class="'filtr_select_box'"
          :get-container="'body'"
        >
          <div class="f_content">
            <van-collapse v-model="filtrActive">
              <van-collapse-item title="达人行业" :name="1">
                <div class="f_btn_box">
                  <template v-for="item,idx in typeDatas">
                    <i
                      @click="industryFn(item)"
                      :key="idx"
                      :class="{'active':item.active}"
                    >{{item.category_name}}</i>
                  </template>
                  <i class="more" @click="unfoldMoreFn">{{isUnfold?'收起':'展开更多'}}</i>
                </div>
              </van-collapse-item>
              <van-collapse-item title="粉丝数" :name="2">
                <div class="f_btn_box">
                  <i
                    v-for="item,idx in fFansData"
                    :class="{'active':item.active}"
                    @click="fFansDataFn(item)"
                    :key="idx"
                  >{{item.text}}</i>
                </div>
              </van-collapse-item>
              <van-collapse-item title="口碑分" :name="3">
                <div class="f_btn_box">
                  <i
                    v-for="item,idx in fLevelData"
                    :class="{'active':item.active}"
                    @click="fLevelDataFn(item)"
                    :key="idx"
                  >{{item.text}}</i>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
          <div class="f_btns_sub">
            <i @click="resetFiltr">重置</i>
            <i class="active" @click="subFiltr">确定</i>
          </div>
        </van-popup>
      </div>
      <div class="search_box">
        <input
          v-model.trim="keyWords"
          @keydown.enter="keyWordsFn"
          type="text"
          placeholder="输入达人名称关键词搜索"
        />
        <i class="search_icon" @click="keyWordsFn" :class="{'active':keyWordsIsActive}"></i>
      </div>
      <div class="goods_list" v-if="!isNodata">
        <ul v-if="datas.length">
          <li v-for="item,idx in datas" :key="idx" @click="goPage(item.authorId)">
            <div class="li_top">
              <div class="livean_box">
                <div class="img_box" @click="goPage(item.authorId)">
                  <img :src="item.logo" v-errorImg:talent />
                </div>
                <div class="liveAnimation" v-if="item.livestatus==1">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
              <div class="gl_text">
                <h5>{{ item.nickName }}</h5>
                <p>行业：{{item.category}}</p>
              </div>
            </div>
            <div class="li_footer">
              <div class="item_data">
                <p class="strong">{{item.publicpraisestr}}</p>
                <p>口碑分</p>
              </div>
              <div class="item_data">
                <p class="strong">{{ format_num(item.associatedvideo) }}</p>
                <p>关联视频</p>
              </div>
              <div class="item_data">
                <p class="strong">{{ format_num(item.associatedlive) }}</p>
                <p>关联直播</p>
              </div>
            </div>
          </li>
        </ul>
        <template v-if="!isNodata">
          <template v-if="!loading">
            <div class="more" @click="getMore" v-if="isMore">查看更多</div>
            <p class="more_no" v-else>我是有底线的~</p>
          </template>
          <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
        </template>
      </div>
      <div class="nodata_page" v-else>
        <div class="img_box">
          <img src="@/assets/three/noData.png" alt />
        </div>
        <p>暂无数据</p>
      </div>
    </div>
    <noPower :minLeve="$store.state.userRoot[8][134].ownerMinLevel" v-else />
    <!-- <div class="blank_holder" v-if="loading"></div> -->
    <div class="bott"></div>
    <!-- <van-popup v-model="activeFiltr" position="top" :style="{ height: '30%' }" /> -->
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      id: this.$route.query.id,
      datas: [], //直播详情数据
      fDate: [
        //筛选-日期
        { text: '近7天', active: false },
        { text: '30天', active: true },
        { text: '90天', active: false }
      ],
      fFansData: [
        //筛选-粉丝数量
        { text: '全部', value: null, active: true },
        { text: '<1w', value: '0 - 10000', active: false },
        { text: '1w-10w', value: '10000 - 100000', active: false },
        { text: '10w-50w', value: '100000 - 500000', active: false },
        { text: '50w-1000w', value: '500000 - 10000000', active: false },
        { text: '>1000w', value: '10000000 - 1000000000', active: false }
      ],
      fLevelData: [
        //筛选-口碑分
        { text: '全部', value: -1, active: true },
        { text: '高', value: 1, active: false },
        { text: '中', value: 2, active: false },
        { text: '低', value: 3, active: false },
        { text: '无', value: 0, active: false }
      ],
      activeFiltr: false, //是否展开筛选下拉框
      isUnfold: false, //是否展开更多
      filtrActive: [1], //默认打开哪个筛选条件
      typeDatas: [], //行业分类
      typeDatas2: [], //行业分类后面的数据（点击展开之后拼接的数据）
      categoryId: 0, //筛选的行业类型id
      fans: null, //筛选粉丝数区间参数
      level: -1, //筛选口碑
      searchDates: [], //存放开始时间和结束时间
      keyWordsIsActive: false, //搜索按钮是否高亮
      keyWords: '', //搜索词
      isDelete: 0, //是否屏蔽已删除的
      sort: 1, //类型排序
      orderBy: 'desc', //desc降序 asc升序
      page: 1, //页码
      size: 10, //个数
      isMore: true, //是否还有下一页
      isNodata: false, //是否有数据
      loading: true,
      hasRoot: true
    };
  },
  created() {
    this.fDate.forEach((item, idx) => {
      let initData = idx ? (idx == 1 ? 30 : 90) : 7;
      let dates = this.initDateInterval(initData);
      item.dates = dates;
    });
    this.searchDates = this.initDateInterval(30); //默认30天
    this.getData();
    this.getTypes();
  },
  mounted() {},
  components: {},
  methods: {
    goPage(id) {
      this.$router.push({
        path: '/talentDetailsMain',
        query: {
          id: id
        }
      });
    },
    initF() {
      //重置筛选项
      this.page = 1;
      this.datas = [];
      this.isMore = true;
    },
    getData() {
      this.loading = true;
      this.isNodata = false;
      this.$axios
        .post('/api/product/proauthor', {
          proId: this.id,
          key: this.trimStr(this.keyWords),
          categoryId: this.categoryId,
          startDate: this.searchDates[0],
          endDate: this.searchDates[1],
          fans: this.fans,
          level: this.level,
          sort: this.sort,
          page: this.page,
          size: this.size,
          order_by: this.orderBy
        })
        .then(res => {
          this.loading = false;
          if (res.data.code == 0) {
            if (this.page == 1) {
              //如果第一页直接赋值，其他的拼接
              this.datas = res.data.data;
            } else {
              this.datas = this.datas.concat(res.data.data);
            }
            if (this.datas.length >= res.data.count) {
              this.isMore = false;
            }
            this.page++;
          } else if (res.data.code == 1003) {
            this.hasRoot = false;
            //无权限
          } else {
            //暂无数据
            this.isNodata = true;
          }
        });
    },
    getMore() {
      //获取更多
      this.getData();
    },
    getTypes() {
      //获取分类
      this.$axios({
        method: 'get',
        url: '/api/category/search'
      })
        .then(res => {
          if (res.data.code == 0) {
            if (res.data.data.length) {
              res.data.data.forEach((item, idx) => {
                item.active = !Boolean(idx);
              });
              this.typeDatas = res.data.data.slice(0, 11);
              this.typeDatas2 = res.data.data.slice(11, res.data.data.length);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    unfoldMoreFn() {
      this.isUnfold = !this.isUnfold;
      if (this.isUnfold) {
        this.typeDatas = this.typeDatas.concat(this.typeDatas2);
      } else {
        this.typeDatas = this.typeDatas.slice(0, 11);
      }
    },
    industryFn(item) {
      //筛选-点击行业分类
      this.typeDatas.forEach(itemC => {
        itemC.active = item == itemC;
      });
      this.categoryId = item.id;
    },
    fFansDataFn(item) {
      //筛选-点击粉丝数
      this.fFansData.forEach(itemC => {
        itemC.active = item == itemC;
      });
      this.fans = item.value;
    },
    fLevelDataFn(item) {
      //筛选-点击粉丝数
      this.fLevelData.forEach(itemC => {
        itemC.active = item == itemC;
      });
      this.level = item.value;
    },
    resetData(datas) {
      //筛选-重置选中的值
      datas.forEach((item, idx) => {
        item.active = !Boolean(idx);
      });
      return datas;
    },
    resetFiltr() {
      //筛选框重置按钮
      this.resetData(this.typeDatas);
      this.resetData(this.fFansData);
      this.resetData(this.fLevelData);
      this.categoryId = 0; //筛选的行业类型id
      this.fans = null; //筛选粉丝数区间参数
      this.level = -1; //筛选口碑
    },
    subFiltr() {
      //筛选框确定按钮
      this.activeFiltr = false;
      this.initF();
      this.getData();
    },
    checkedDateFn(item) {
      //切换日期选项
      this.fDate.forEach(itemC => {
        itemC.active = false;
      });
      item.active = true;
      this.searchDates = item.dates;

      this.initF();
      this.getData();
    },
    keyWordsFn() {
      //输入框点击搜索
      if (this.keyWords) {
        this.initF();
        this.getData();
      }
    },
    keyWordsBlur() {
      //输入框失去焦点
      this.keyWordsIsActive = Boolean(this.keyWords);
    },
    shieldDeletedFn() {
      //屏蔽已删除
      this.isDelete = this.isDelete ? 0 : 1;
      this.initF();
      this.getData();
    }
  },
  computed: {},
  watch: {
    keyWords(newVal) {
      if (newVal == '') {
        this.keyWordsIsActive = false;
        this.initF();
        this.getData();
      } else {
        this.keyWordsIsActive = true;
      }
    }
  },
  filters: {
    setPrice(prices) {
      let maxP = (prices[0] = Number(prices[0]));
      let minP = (prices[1] = Number(prices[1]));
      if (maxP > minP) {
        return '￥' + minP + '-' + maxP;
      } else if (maxP == minP || maxP < minP) {
        return '￥' + minP;
      } else if (maxP == 0 && minP == 0) {
        return '--';
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.bott {
  width: 100%;
  height: 0.36rem;
  background-color: #f1f1f1;
}

@import './../../../common/common.styl';

.titone {
  margin: 0.6933rem 0.4rem 0;
}

.live_details {
  position: relative;
  padding: rem(50) 0 rem(50);

  h3 {
    margin: 0 rem(30);
  }

  .filtr_box {
    position: relative;
    margin-top: rem(26);
  }

  .filtr_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 rem(30);

    .ld_search_date {
      font-size: 0;

      span {
        display: inline-block;
        padding: rem(6) rem(14);
        background-color: #fff;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        font-size: rem(24);
        margin-right: rem(15);

        &.active {
          background-color: #fd7f2c;
          border-color: #fd7f2c;
          color: #fff;
        }
      }
    }

    .filtr_btn {
      font-size: 0;

      i {
        display: inline-block;
        width: rem(25);
        height: rem(25);
        bgp('./../../../assets/img/filter.png');
        vertical-align: middle;
      }

      span {
        display: inline-block;
        margin-left: rem(14);
        font-size: rem(28);
        color: #555;
        vertical-align: middle;
      }

      &.active {
        i {
          bgp('./../../../assets/img/filter_ed.png');
        }

        span {
          color: #fd7f2c;
        }
      }
    }
  }

  .ld_data {
    display: flex;
    justify-content: space-between;
    margin-top: rem(20);

    .data_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: rem(335);
      border-radius: rem(10);
      padding: rem(17) rem(30);
      font-size: rem(28);
      background-color: #f5f5f5;
      box-sizing: border-box;

      span {
        color: #888;
      }

      .strong {
        color: #222;
        // font-family: DINPro-Medium;
      }
    }
  }

  .search_box {
    position: relative;
    box-sizing: border-box;
    height: rem(74);
    border-radius: rem(10);
    border: solid 1px #e5e5e5;
    background-color: #fff;
    padding: 0 rem(80) 0 rem(32);
    margin: rem(30) rem(30) 0;

    input {
      width: 100%;
      height: 100%;
      border: none;
      font-size: rem(28);
    }

    .search_icon {
      position: absolute;
      right: 0;
      top: 0;
      display: inline-block;
      width: rem(94);
      height: rem(72);
      bgp('./../../../assets/two/search-nohover.png');
      background-size: rem(30) rem(30);

      &.active {
        bgp('./../../../assets/two/search.png');
        background-size: rem(30) rem(30);
      }
    }
  }

  .goods_list {
    position: relative;
    padding: 0 rem(30) 0;

    li {
      padding: rem(30) 0;
      border-bottom: 1px solid #e5e5e5;

      // &:last-child{
      // border-bottom none;
      // }
      .li_top {
        display: flex;
        align-items: center;

        .img_box {
          position: relative;
          flex-shrink: 0;
          width: rem(100);
          height: rem(100);
          margin-right: rem(19);
          border-radius: rem(100);
          overflow: hidden;

          img {
            width: 100%;
          }
        }

        .gl_text {
          width: rem(570);

          h5 {
            font-size: rem(30);
            color: #222;
            font-weight: normal;
            omit();
          }

          p {
            font-size: rem(24);
            color: #888;
            margin-top: rem(5);
          }
        }
      }

      .li_footer {
        display: flex;
        justify-content: space-between;
        margin-top: rem(30);
        padding: 0 rem(64);

        .item_data {
          text-align: center;
          font-size: 0;

          .strong {
            font-size: rem(30);
            color: #222;
            font-family: DINPro-Medium;
          }

          p {
            font-size: rem(24);
            color: #888;
          }
        }
      }
    }

    .more {
      width: rem(160);
      height: rem(60);
      margin: rem(50) auto rem(0);
      text-align: center;
      line-height: rem(60);
      border-radius: rem(10);
      border: solid 1px #fd7f2c;
      font-size: rem(26);
      color: #fd7f2c;
    }

    .more_no {
      margin-top: rem(26);
      font-size: rem(24);
      color: #b5b5b5;
      text-align: center;
    }
  }
}

.f_mask {
  position: absolute;
  width: 100%;
  height: calc(100% - 2.5rem);
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.loading {
  margin: rem(50) 0 rem(10);
}

.nodata_page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: rem(100) 0;

  .img_box {
    width: rem(297);
    height: rem(232);

    img {
      width: 100%;
      height: 100%;
    }
  }

  p {
    font-size: rem(26);
    color: #888;
  }
}

.filtr_select_box {
  width: 80%;
  height: 100%;
  overflow: hidden;

  .f_content {
    position: relative;
    // padding: 0 rem(30);
    // background-color: #fff;
    // padding-bottom: rem(50);
    z-index: 10;
    height: calc(100% - 1.8rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    .f_btn_box {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      font-size: 0;

      &:after {
        content: '';
        width: rem(216);
        height: 0;
        margin-right: rem(20);
      }

      i {
        display: inline-block;
        box-sizing: border-box;
        width: rem(216);
        height: rem(64);
        margin-bottom: rem(23);
        margin-right: rem(20);
        line-height: rem(64);
        border-radius: rem(10);
        font-size: rem(26);
        border: solid 1px #e5e5e5;
        text-align: center;
        font-style: normal;
        color: #555;

        &:nth-child(3n) {
          // margin-right: 0;
        }

        &.active {
          background-color: #fff4ed;
          border-color: #fd7f2c;
          color: #fd7f2c;
        }

        &.more {
          color: #fd7f2c;
        }
      }
    }
  }

  .f_btns_sub {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: rem(20) 0;
    text-align: center;
    font-size: 0;
    box-sizing: border-box;

    i {
      display: inline-block;
      width: rem(200);
      height: rem(78);
      line-height: rem(78);
      font-size: rem(28);
      text-align: center;
      border-radius: rem(10);
      border: solid 1px #e5e5e5;
      background-color: #fff;
      font-style: normal;
      color: #888;

      &.active {
        background-color: #fd7f2c;
        border-color: #fd7f2c;
        color: #fff;
      }

      &:first-child {
        margin-right: rem(27);
      }
    }
  }
}

.livean_box {
  width: 1.33rem;
  height: 1.33rem;
  margin-right: 0.25rem;
  position: relative;
}
</style>
